<template>
  <div class="home">
    <homeHeader></homeHeader>
    <div id="bottom">
      <menuNav></menuNav>
      <main>
        <div style="margin-top: 30px ; margin-left: 20px;">


          <el-form :model="Withdrawdatas" ref="Withdrawdatas" label-width="100px" class="demo-ruleForm">

            <el-form-item label="已结算金额" required>
              <span>{{Withdrawdata.s2}}元</span>

            </el-form-item>
            <el-form-item label="已提现金额" required>
              <span>{{Withdrawdata.withdrawMoney}}元</span>

            </el-form-item>
            <el-form-item label="体现中金额" required>
              <span>{{Withdrawdata.withdrawIngMoney}}元</span>

            </el-form-item>
            <el-form-item label="可提现金额" required>
              <span>{{Withdrawdata.s4}}元 <span style="color: crimson;"
                  v-if="Withdrawdata.mchStatus==1">冻结中，请联系客服</span></span>

            </el-form-item>
            <el-form-item label="提现金额" prop="withdrawApplyMoney" style="margin-top: 20px;" :inline="true" required
              :rules="[
              { required: true, message: '金额不能为空'},
              { min: 1, max: 5, message: '长度在 1到 5个整数数字', trigger: 'blur' }
              
            ]">

              <el-input v-model="Withdrawdatas.withdrawApplyMoney " @blur="tixian" style="width: 100px;" size="small"
                onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"></el-input> 元 <el-button type="text">
                全部提现</el-button>

              <div style="font-size: 10px; color: rgb(248, 8, 8);">当日提现金额最多不超过10000元</div>
            </el-form-item>

            <el-form-item label="到款账户" prop="withdrawType" required :rules="[
              { required: true, message: '请选取账户'}, 
            ]">

              <el-radio-group v-model="Withdrawdatas.withdrawType">

                <el-radio :label="0" @change="isbank">银行卡账户</el-radio>
                <el-radio :label="1" @change="ispaly">支付宝账户</el-radio>

              </el-radio-group>
              <template v-if="isplay">
                <el-table :data="alipaydata" style="width: 100%">
                  <el-table-column prop="aAccount" label="账号" width="180">
                  </el-table-column>
                  <el-table-column prop="aName" label="姓名">
                  </el-table-column>
                  <el-table-column label="操作">
                    <el-button @click="achanges" type="text">更换账户</el-button>
                  </el-table-column>
                </el-table>
                <el-button @click="achanges" type="text">添加账户</el-button>
              </template>
              <div v-if="isban">

                <div style="display: flex;">
                  <div
                    style="width: 250px;height: 120px; border: 1px solid black; margin-right: 10px; background-color: rgb(199, 197, 196);">
                    <p style="text-align: center; margin-top: 10px;">中国工商银行</p>
                    <p style="text-align: center;">1254668959565656113</p>
                  </div>
                  <el-button type="text">更换账户</el-button>
                </div>
                <el-button @click="achanges" type="text">添加账户</el-button>
              </div>
            </el-form-item>
            <el-form-item label="短信验证码" required :rules="[
              { required: true, message: '验证码不能为空，请输入验证码'},
              { min: 1, max: 6, message: '长度在 1到 6个整数数字', trigger: 'blur' }
              
            ]">
              <el-input style="width: 150px;" onkeyup="this.value = this.value.replace(/[^\d]/g,'');" size="small">
              </el-input>
              <el-button size="small">获取验证码</el-button>
              <div>验证码短信将发送到您登陆的手机：<span>+86-155****8888</span>，请注意查收</div>
            </el-form-item>
            <el-form-item label="提现理由" required :rules="[
              { required: true, message: '理由不能为空'},
              { min: 5, max: 30, message: '长度在 5到 30个字符', trigger: 'blur' }
              
            ]">
              <el-input type="textarea" v-model="Withdrawdatas.withdrawRemark"
                @input='e => Withdrawdatas.withdrawRemark = this.validSe (e)' style="width: 300px;;" minlength="5"
                maxlength="30"></el-input>

            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('Withdrawdatas')">确认提现</el-button>
            </el-form-item>

          </el-form>
          <el-dialog title="温馨提示" :visible.sync="dialogVisible" width="30%" :modal-append-to-body="false">
            <span>提现申请已提交,提现金额将在15个工作日到账</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click=" isgo ">确定</el-button>

            </span>
          </el-dialog>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
  import menuNav from "../../components/MenuNav";
  import homeHeader from "../../components/Header";
  export default {
    name: "AdvManage",

    data() {
      return {
        dialogVisible: false,
        isban: false,
        isplay: false,
        pageNum: 1,
        pageSize: 10,
        records: {},
        Withdrawdata: {},
        Withdrawdatas: {
          alipayAccount: "",
          alipayName: ""
        },
        alipaydata: {},
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''


      };
    },
    created() {
      if(!JSON.parse(sessionStorage.getItem("userMsg"))){
        this.$message("未登录，请去登录")
      }
      this.Withdrawlist()

    },
    methods: {
      // 提现金额不能大于
      tixian() {
        if (this.Withdrawdatas.withdrawApplyMoney > this.Withdrawdata.s4) {
          this.$message("提现额度不能大于可提现额度")
        }
      },
      // 添加提现确定弹窗按钮返回提现记录 /record
      isgo() {
        this.dialogVisible = false
        this.$router.push('/record')
      },
      //  切换默认支付宝账户
      achanges() {
        this.$router.push('/shop')
      },
      // 切换银行账户
      isbank() {
        this.isban = true,
          this.isplay = false
      },
      // 切换支付宝账户
      ispaly() {
        this.isban = false,
          this.isplay = true
        this.$post("/cw/mchAlipay/select", {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          records: {
            isDef: 1,
            mchId: JSON.parse(sessionStorage.getItem("userMsg")).userId,
          },
        }).then(res => {
          if (res.data.code === 200) {
            console.log(res)
            this.alipaydata = res.data.data.records
            this.Withdrawdatas.alipayAccount = res.data.data.records[0].aAccount,
              this.Withdrawdatas.alipayName = res.data.data.records[0].aName
            console.log(this.Withdrawdatas.alipayAccount)
            console.log(this.Withdrawdatas.alipayName)
          } else {

          }

        })

      },
      // 确认提现按钮
      submitForm(formName) {
        console.log("00000")
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.Withdrawdata.mchStatus == 1) {
              this.$message({
                type: 'success',
                message: '冻结中，暂时不能提现！'
              });
            } else if (this.Withdrawdata.mchStatus == 1) {
              var datas = {
              withdrawApplyMoney: this.Withdrawdatas.withdrawApplyMoney,
              mchId: JSON.parse(sessionStorage.getItem("userMsg")).userId,
              withdrawType: this.Withdrawdatas.withdrawType,
              alipayId: 0,
              alipayAccount: this.Withdrawdatas.alipayAccount,
              alipayName: this.Withdrawdatas.alipayName,
              withdrawRemark: this.Withdrawdatas.withdrawRemark
            }
            console.log(datas)

            this.$post("/cw/mchWithdrawBill/save", datas).then(res => {
              if (res.data.code === 200) {
                console.log(res)
                this.Withdrawdatas.withdrawApplyMoney = ""
                this.Withdrawdatas.withdrawRemark = ""
                this.dialogVisible = true

                this.Withdrawlist()
              } else {
                console.log(res)
                alert(res.data.msg)
              }

            })
            }
          
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },

      Withdrawlist() {
        this.$post("/cw/dyBillDetails/mchStatisticsInfoByMchId", {
          mchId: JSON.parse(sessionStorage.getItem("userMsg")).userId,

        }).then(res => {
          if (res.data.code === 200) {
            console.log(res)
            this.Withdrawdata = res.data.data
            console.log(this.Withdrawdata)
            this.Withdrawdata.s4 = this.Withdrawdata.s2 - this.Withdrawdata.withdrawMoney - this.Withdrawdata.withdrawIngMoney
            if (this.Withdrawdata.mchStatus == 1) {
              this.$message({
                type: 'success',
                message: '冻结中，暂时不能提现！'
              });
            }
          } else {

          }

        })
      }

    },
    components: {
      menuNav,
      homeHeader,
    },
  };
</script>
<style scoped>
  html,
  body {
    /* height: 100%; */
    margin: 0;
    font-size: 24px;
    color: #fff;
    font-family: "微软雅黑";
  }

  .div-box {
    position: relative;
    width: 320px;
    /* height: 100%; */
    margin: 20px 0;
    margin-left: 120px;
    background: #87cefa;
    border: #ccc solid 5px;
  }

  .el-aside {
    /* background-color: black; */
    color: white;
    /* height: 100%;/ */
  }

  .el-header {
    background-color: black;
    color: white;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

  .el-menu {
    background-color: black;
  }

  .cell {
    text-align: center;
  }

  .el-table--border td,
  .el-table--border th {
    padding: 2px;
  }

  h3 {
    text-align: center;
    margin: 10px 0 20px 0;
  }

  .small {
    width: 80px;
  }

  .showImg span {
    display: inline-block;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    position: absolute;
    top: 20px;
    right: 100px;
    border: 1px solid #ccc;
    border-radius: 18px;
    color: #ccc;
  }

  .showImg span:hover {
    color: #fff;
    background-color: rgb(189, 57, 25);
    border: 1px solid rgb(189, 57, 25);
    transition: all 0.5s;
  }

  .bg {
    background-color: rgb(64, 158, 255) !important;
    color: #fff !important;
  }

  .wihte {
    background-color: #cccccc;
    border: 1px solid;
    color: #fff !important;
  }

  .sky {
    width: 60%;
    height: 80vh;
    text-align: center;
    line-height: 80vh;
    margin: 0 auto;
    color: #999;
  }

  .goLogin {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: red;
  }

  .el-table::before {
    height: 0px;
  }
</style>